<template>
  <view
    class="activity-page"
    :style="{
      backgroundImage: `url(${oss2('activity/home/activity_bg.png')})`,
    }"
  >
    <view class="go-home" @click.stop="goHome">
      <image :src="oss2('activity/home/go_home.png')" />
    </view>
    <!-- <image class="activity-title" :src="oss2('activity/home/ty_title.png')" />
    <image
      class="luck-banner"
      :src="oss2('activity/home/ty_banner.png')"
      @click.stop="goLucky"
    /> -->
    <image
      class="w-375px h-79.5px mb-10px"
      :src="oss2('activity/home/ty_title_2.png')"
    />
    <view
      class="content-box"
      :style="{
        backgroundImage: `url(${oss2('activity/home/content_box.png')})`,
      }"
    >
      <view class="content-card" v-for="no in 6" :key="no">
        <image
          v-if="[1, 2].includes(no)"
          class="hots"
          :src="oss2('activity/home/wg.png')"
        />
        <image
          class="content-cover"
          :src="oss2(`activity/home/${no}_item.png`)"
        />
        <view class="detail-btn" @click.stop="viewDetail(no)"></view>
      </view>

      <view class="content-bottom">以上图片仅供参考</view>
    </view>
  </view>
</template>
  
  <script setup>
import { oss2 } from "@/utils/utils";
import { onShow } from "@dcloudio/uni-app";

onShow(() => {
  getApp().accessLogAdd();
});
const viewDetail = (no) => {
  uni.navigateTo({
    url: `/campaign/pages/mid-autumn/detail?no=${no}`,
  });
};

const goHome = () => {
  uni.switchTab({
    url: "/pages/home/home",
  });
};

const goLucky = () => {
  uni.showToast({
    icon: "none",
    title: "活动已结束",
  });
};
</script>
  
  <style lang="less" scoped>
.activity-page {
  width: 100%;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 1262px;
  padding-bottom: 51px;
  background-color: #0158c9;
  image {
    display: block;
  }
}
.go-home {
  height: 54px;
  display: flex;
  align-items: center;
  padding: 2px 0 0 7px;
  box-sizing: border-box;
  image {
    width: 155px;
    height: 40px;
  }
}
.activity-title {
  width: 375px;
  height: 98px;
}
.luck-banner {
  width: 100%;
  height: 226px;
  margin: 7px 0 1px 0;
}
.content-box {
  width: 375px;
  height: 754px;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 754px;
  box-sizing: border-box;
  padding: 32px 18px 18px 18px;
  display: flex;
  flex-wrap: wrap;
  .content-card {
    width: 50%;
    position: relative;
    margin-top: 4px;
    &:nth-child(-n + 2) {
      margin-top: 0;
      .detail-btn {
        bottom: 10px;
      }
    }
    .content-cover {
      max-width: 100%;
      width: 170px;
      height: 232px;
    }
    .hots {
      position: absolute;
      left: -2px;
      top: -6px;
      width: 28px;
      height: 28px;
    }
    .detail-btn {
      width: 90px;
      height: 28px;
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translate(-50%, 0);
    }
  }

  .content-bottom {
    color: #fff;
    font-size: 8px;
    width: 100%;
    text-align: center;
    margin-top: -15px;
  }
}
</style>
  